import {Component, Input, OnInit, ViewEncapsulation, ViewChild, OnDestroy} from '@angular/core';
import {ActivatedRoute, Params, Router} from "@angular/router";
import {PlatformLocation} from "@angular/common";

import {Observable, Subscription} from "rxjs";
import {HomepageService} from "@homepage/homepage.service";
import {ToolsService} from "@shared/service/tools/tools.service";
import {FeedRespVO, UserAlbumFileVO, UserInfoVO} from "@interface/index";



@Component({
  selector: 'person-share',
  templateUrl: './homepage-share.component.html',
  styleUrls: ['./homepage-share.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class HomepageShareComponent implements OnInit, OnDestroy {
  public _content;
  public src: string;
  public poster: string;
  public userId: UserInfoVO;
  public feeds: Observable<FeedRespVO[]>;
  public gallery: Observable<UserAlbumFileVO[]>;
  public videoThumbnail: Observable<UserAlbumFileVO[]>;

  @Input()
  get content() {
    return this._content;
  }

  set content(val) {
    this._content = val;
  }

  @ViewChild('videoModal') videoModal;
  subscription: Subscription = new Subscription();
  scrollContainer;

  constructor(public homepageService: HomepageService,
              public _activatedRoute: ActivatedRoute,
              public toolsService: ToolsService,
              private location: PlatformLocation,
              public router: Router) {
    this.location.onPopState((event) => {
      if (this.videoModal !== undefined) {
        this.videoModal.hide();
      }
    });
    this.feeds = this.homepageService.feeds;
    this.gallery = this.homepageService.gallery;
    this.videoThumbnail = this.homepageService.videoThumbnail;
    this.subscription.add(
      this._activatedRoute.params.subscribe((params: Params) => {
        this.userId = params['userId'];
        this.scrollContainer = document.querySelector('#seed-scroll-content');
      })
    );
  }


  showVideoView(src: string) {
    if (!src) {
      return;
    }
    this.src = src;
    // this.poster = src+'&width=750&second=1';
    this.poster = this.toolsService.replaceVideoUrl(src, 750);
    this.videoModal.show();
    this.content.disableScroll();
  }

  gotoPicture() {
    this.router.navigate(['/homepage/pictures'], {queryParams: {userId: this.userId}});
  }

  gotoVideo() {
    this.router.navigate(['/homepage/videos'], {queryParams: {userId: this.userId}});
  }

  goToFeed() {
    if (this.userId) {
      this.router.navigate(['/feed', this.userId]);
    }
  }
  goToFeedDetail(feed) {
    this.router.navigate(['/feed/detail', feed.feedId]);
  }
  gotoViewPicture(idx) {
    this.router.navigate(['/homepage/viewer/9'], {queryParams: {index: idx}});
  }

  ngOnInit() {

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}
